<script setup lang="ts">
import Header from '../../components/Header.vue'
</script>
<template>
  <div class="my-page w-full overflow-hidden">
    <Header title="中央看板系统" />
    <section class="my-page-content flex items-center">
      <div class="w-full flex justify-around router-box">
        <div class="router-item">
          <p class="router-title">FA</p>
          <div class="item-box">
            <router-link to="/FA"><button>FA生产看板系统</button></router-link>
            <button>FA设备监控系统</button>
          </div>
          <div class="mask"></div>
        </div>
        <div class="router-item">
          <p class="router-title">SMT</p>
          <div class="item-box">
            <router-link to="/SMT"><button>SMT生产看板系统</button></router-link>
            <button>SMT设备监控系统</button>
          </div>
          <div class="mask"></div>
        </div>
        <div class="router-item">
          <p class="router-title">其他</p>
          <div class="item-box">
            <button>仓储作业</button>
            <button>IQC作业</button>
          </div>
          <div class="mask"></div>
        </div>
      </div>
    </section>
  </div>
</template>
<style lang="less" scoped>
.my-page {
  background: #030542 url('../../assets/page-bg.jpg') no-repeat center center;
  background-size: cover;
}
.router-item {
  width: calc((86% - 246px) / 3);
  height: 440px;
  position: relative;
  border: 1px solid #1a74f7;
  background: rgba(3, 2, 99, 0.4);
}
.router-title {
  width: 100%;
  height: 64px;
  line-height: 60px;
  font-size: 26px;
  text-indent: 50px;
  background: url('../../assets/router-title-bg.png') no-repeat center center;
  background-size: contain;
}
.item-box {
  button {
    width: 88%;
    height: 56px;
    margin: 30px 6% 0;
    font-size: 27px;
    line-height: 56px;
    text-align: center;
    background: #051e7b;
    border: 1px solid #1a74f7;
    opacity: 0.8;
  }
}
</style>
